<template>
    <div class="step-box" :style="{'--highlightColor': highlightColor}">
        <div class="step-bar">
            <!--主题切换-->
            <div class="tool" v-if="showTheme">
                <label for="theme">主题切换：</label><input type="color" id="theme" v-model="highlightColor">
            </div>

            <!-- 进度条 -->
            <div class="step-item" :class="{'active':currentStep===index}" v-for="(stepName,index) of stepNames" :key="index">
                <span class="step-label">{{index+1}}</span>{{stepName}}
            </div>

            <!--表单封装-->
            <div class="step-tool" v-for="(stepItem,index) in stepNames" v-show="index === currentStep">
                <form @submit.prevent="handleSubmit" :ref="'step'+'-'+index">
                    <div class="step-slot">
                        <slot :name="'step'+'-'+index">
                            <slot :name="'step'+'-'+index+'-label'"></slot>
                            <slot :name="'step'+'-'+index+'-content'"></slot>
                        </slot>
                    </div>
                    <button type="button" @click="resetForm">重置</button>
                    <button type="button" class="prev" @click="prevStep" v-if="currentStep != 0">上一步</button>
                    <button type="submit" class="next">{{currentStep != totalStep-1?'下一步':'提交'}}</button>
                </form>
            </div>

            <!--表单填写结果-->
            <div v-if="completed" class="result">
                表单提交结果：{{result}}
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "StepForm",
        props : {
            stepNames :{     // 步骤名称数组
                type : Array,
                required: true
            },
            showResult : {
                type: Boolean,
                required: false,
                default : false
            },
            showTheme : {
                type: Boolean,
                required: false,
                default : false
            },
            themeColor :{
                type: String,
                required: false,
                default : "#67c27a"
            }
        },
        data(){
            return {
                currentStep : 0,  // 当前第几步
                totalStep : 0, // 总的步数
                formData : {},  // 表单数据
                result : null,  // 表单的结果
                highlightColor: "",  // 自定义高亮主题色
            }
        },
        mounted(){
            this.totalStep = this.stepNames.length
            this.highlightColor = this.themeColor
        },
        methods: {
            prevStep(){
                if(this.currentStep != 0){
                    this.currentStep--;
                }
            },
            resetForm(){
                let form = this.$refs['step-'+this.currentStep][0]; // 动态获取到表单
                form.reset();
            },
            handleSubmit(){
                let form = this.$refs['step-'+this.currentStep][0]; // 动态获取到表单
                let input = form.elements[0]; // 获取表单元素
                let prop = input.getAttribute("name");  // 获取属性名
                let value = input.value; // 获取属性值
                this.formData[prop] = value; // 绑定数据
                //判断是否已经到最后一步骤
                if(this.currentStep === this.totalStep-1){
                    // 完成提交后向子组件传递数据
                    this.result = this.formData;
                    this.$emit('success', JSON.parse(JSON.stringify(this.formData)));
                }else{
                    this.currentStep++;  // 每次提交后自动跳转到下一步
                }
            }
        },
        computed : {
            completed(){
                return this.showResult && this.result
            }
        }
    }
</script>

<style scoped>
    /*工具条*/
    .tool {
        text-align: left;
        width: 90vw;
        margin: 10px auto;
        color: #333;
        font-weight: bold;
    }

    /*进度条*/
    .step-box {
        --highlightColor : #67c27a;
        --defaultColor : #f0f0f0;
        --color: #666;
        --height: 50px
    }
    .step-bar {
        width: 90vw;
        height: var(--height);
        margin-left: auto;
        margin-right: auto;
        line-height: var(--height);
        display: flex;
        flex-wrap: wrap;
    }
    .step-bar>.step-item {
        background: var(--defaultColor);
        text-align: center;
        font-weight: bold;
        flex: 1;
    }
    .step-bar>.step-item>.step-label{
        padding: 6px 10px;
        margin-right: 5px;
    }
    .step-bar>.step-item.active {
        background: var(--highlightColor);
        color: #fff;
    }
    .step-bar>.step-item.active>.step-label {
        border-radius: 50%;
        background: #fff;
        color: var(--highlightColor);
    }
    /*工具条*/
    .step-tool {
        width: 100%;
        text-align: right;
    }
    .step-tool button {
        background: none;
        outline: none;
        padding: 8px 18px;
        margin-left: 10px;
        color: var(--color);
        border: 1px solid var(--color);
        font-weight: bold;
    }
    .step-tool .prev {
        border-color: var(--highlightColor);
        color: var(--highlightColor);
    }
    .step-tool .next{
        border-color: var(--highlightColor);
        background-color: var(--highlightColor);
        color: #fff;
    }

    /*使用框架的核心：预定优于编程 */
    .step-slot {
        width: 100%;
        height: 60px;
        line-height: 60px;
        margin: 10px 0;

        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0px 20px;
    }
    .step-slot div {
        font-size: 20px;
        color: var(--highlightColor);
    }
    .step-slot input{
        width: 70vw;
        height: 40px;
        padding-left: 30px;
        font-size: 16px;
        color: var(--highlightColor);
        border: none;
        outline: none;
        border: 1px solid var(--highlightColor);
    }
    .step-slot input:focus {
        -webkit-box-shadow:1px 1px 10px 1px var(--highlightColor);
        -moz-box-shadow:1px 1px 10px 1px var(--highlightColor);
        box-shadow:  1px 1px 10px 1px var(--highlightColor);
        color: var(--highlightColor);
    }

    .result {
        width: 100%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 22px;
        color: #fff;
        background: var(--highlightColor);
        margin: 10px 0;
    }
</style>